<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Highcharts Example</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <style type="text/css">
        ${demo.css}
    </style>
    <script type="text/javascript">
        $(function () {
            $('#container').highcharts({

                        chart: {
                            type: 'gauge',
                            plotBorderWidth: 1,
                            plotBackgroundColor: {
                                linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
                                stops: [
                                    [0, '#FFF4C6'],
                                    [0.3, '#FFFFFF'],
                                    [1, '#FFF4C6']
                                ]
                            },
                            plotBackgroundImage: null,
                            height: 200
                        },

                        title: {
                            text: 'VU meter'
                        },

                        pane: [
                            {
                                startAngle: -45,
                                endAngle: 45,
                                background: null,
                                center: ['25%', '145%'],
                                size: 300
                            },
                            {
                                startAngle: -45,
                                endAngle: 45,
                                background: null,
                                center: ['75%', '145%'],
                                size: 300
                            }
                        ],

                        yAxis: [
                            {
                                min: -20,
                                max: 6,
                                minorTickPosition: 'outside',
                                tickPosition: 'outside',
                                labels: {
                                    rotation: 'auto',
                                    distance: 20
                                },
                                plotBands: [
                                    {
                                        from: 0,
                                        to: 6,
                                        color: '#C02316',
                                        innerRadius: '100%',
                                        outerRadius: '105%'
                                    }
                                ],
                                pane: 0,
                                title: {
                                    text: 'VU<br/><span style="font-size:8px">Channel A</span>',
                                    y: -40
                                }
                            },
                            {
                                min: -20,
                                max: 6,
                                minorTickPosition: 'outside',
                                tickPosition: 'outside',
                                labels: {
                                    rotation: 'auto',
                                    distance: 20
                                },
                                plotBands: [
                                    {
                                        from: 0,
                                        to: 6,
                                        color: '#C02316',
                                        innerRadius: '100%',
                                        outerRadius: '105%'
                                    }
                                ],
                                pane: 1,
                                title: {
                                    text: 'VU<br/><span style="font-size:8px">Channel B</span>',
                                    y: -40
                                }
                            }
                        ],

                        plotOptions: {
                            gauge: {
                                dataLabels: {
                                    enabled: false
                                },
                                dial: {
                                    radius: '100%'
                                }
                            }
                        },


                        series: [
                            {
                                data: [-20],
                                yAxis: 0
                            },
                            {
                                data: [-20],
                                yAxis: 1
                            }
                        ]

                    },

                    // Let the music play
                    function (chart) {
                        setInterval(function () {
                            var left = chart.series[0].points[0],
                                    right = chart.series[1].points[0],
                                    leftVal,
                                    rightVal,
                                    inc = (Math.random() - 0.5) * 3;

                            leftVal = left.y + inc;
                            rightVal = leftVal + inc / 3;
                            if (leftVal < -20 || leftVal > 6) {
                                leftVal = left.y - inc;
                            }
                            if (rightVal < -20 || rightVal > 6) {
                                rightVal = leftVal;
                            }

                            left.update(leftVal, false);
                            right.update(rightVal, false);
                            chart.redraw();

                        }, 500);

                    });
        });
    </script>
</head>
<body>
<script src="../../js/highcharts.js"></script>
<script src="../../js/highcharts-more.js"></script>
<script src="../../js/modules/exporting.js"></script>

<div id="container" style="width: 600px; height: 300px; margin: 0 auto"></div>

</body>
</html>
